左と中央カラムのコンテナ：後から記述する右側カラムに float:right を指定しているので、このコンテナ要素は左側に回りこむ
　box-B
先に記述して中央に表示したい中央カラム　：float: right; を指定

周囲に<margin: 20px>をとった<p>要素： 親の div要素に float属性を付けているのでマージンの相殺が起きない。

　メインコンテンツの欄
　box-A
中央カラムより後に記述したけれど左に表示したいカラム
： float: left; を指定

但し、box-Aの後に記述するとレスポンシブ対応で縦積みにした時(680px未満)は中央カラムの下に回りこんでしまう。
先に記述した例はこちら

周囲に<margin: 20px>をとった<p>要素

　ページ内インデックスなどの列
左・中央カラムの下に記述したい要素 　　clear: right; を指定 　フロートを指定しないブロックなので背景色やボーダーが box-A・box-Bの影に隠れてしまう。( box-A・box-B の間をわざと開けているので隙間だけ背景色が見える)

　box-C
右側カラム　　float: rightを指定

周囲に<margin: 20px>をとった<p>要素

　サイト内インデックスなどの列

@media screen{} で 1080px未満の時は float:right を float:none に切り替えると、コンテナボックスの下に回り込んだ時　背景色やボーダーは box-A・box-B の背景に隠れてしまう。(文字は隠れない)
対応策は 1080px未満の時は float:right を float:left に切り替えると背景も隠れなくなる。


左と中央カラムのコンテナ-2
先に記述したい中央カラム-2

周囲に<margin: 20px>をとった<p>要素： 親の div要素に float属性を付けているのでマージンの相殺が起きない。

上の段のスタイルシートに　３つのカラムの高さを自動で揃える属性を追加したサンプル

親要素（コンテナ）に overflow: hidden; height: auto;　を、
各カラムのブロック要素に
margin-bottom: -1000px; padding-bottom: 1000px;　を指定する。
（実際にはまず左・中央のカラムを揃え、次にそれらのコンテナと右カラムの高さをそろえている）

後に記述したけれど左にしたいカラム-2

周囲に<margin: 20px>をとった<p>要素

左・中央カラムの下に記述したい要素 　　clear: right; を指定　　但し、高さをそろえるとこのブロックのように背景色やボーダーがそのブロックの影に隠れてしまう。

右側カラム-2

周囲に<margin: 20px>をとった<p>要素